import {StyleSheet, Text, View, TouchableOpacity} from "react-native";
import AntDesign from "@expo/vector-icons/AntDesign";
import { useRouter } from 'expo-router'

const superGroupComponent = function () {
    const router = useRouter();

    const goSuperGroupDetail = function () {
        router.push("/registerGroup/superGroupDetail")
    };

    return (
        <View style={styles.superGroupContainer}>
            <TouchableOpacity onPress={goSuperGroupDetail}>
                <View style={styles.superGroupItem}>
                    <View style={styles.superGroupItemLeft}>
                        <View style={styles.title}>
                            <Text style={styles.titleText}>
                                吃喝玩乐搭子群
                            </Text>
                        </View>
                        <View style={styles.content}>
                            <Text style={styles.contentText}>
                                群介绍群介绍群介绍群介绍
                            </Text>
                        </View>
                    </View>
                    <AntDesign name="right" size={12} color="#9C9EAC" />
                </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={goSuperGroupDetail}>
                <View style={styles.superGroupItem}>
                    <View style={styles.superGroupItemLeft}>
                        <View style={styles.title}>
                            <Text style={styles.titleText}>
                                吃喝玩乐搭子群
                            </Text>
                        </View>
                        <View style={styles.content}>
                            <Text style={styles.contentText}>
                                群介绍群介绍群介绍群介绍
                            </Text>
                        </View>
                    </View>
                    <AntDesign name="right" size={12} color="#9C9EAC" />
                </View>
            </TouchableOpacity>
        </View>
    )
};

const styles = StyleSheet.create({
    superGroupContainer: {
        paddingHorizontal: 12,
    },
    superGroupItem: {
        flexDirection: "row",
        alignItems: "center",
        backgroundColor: "#FFFFFF",
        paddingVertical: 21,
        paddingHorizontal: 12,
        borderRadius: 8,
        marginBottom: 12,
    },
    superGroupItemLeft: {
        flex: 1,
    },
    title: {},
    titleText: {
        fontWeight: "bold"
    },
    content: {
        marginTop: 4,
    },
    contentText: {
        fontSize: 12,
        color: "#9C9EAC"
    },
});

export default superGroupComponent;
